import React,{useEffect,useState} from 'react'
import { Layout, Menu } from 'antd';
import './index.css'
import { withRouter } from 'react-router-dom';
import axios from 'axios'
import {connect} from 'react-redux'
import {
  HomeOutlined,
  UserOutlined,
  PicRightOutlined,
  PaperClipOutlined,
  AuditOutlined,
  FormOutlined
} from '@ant-design/icons';
const {Sider } = Layout
const { SubMenu } = Menu;

// 模拟侧边栏数据结构
// const menuList = [
//   {
//     key:'/home',
//     title:'首页',
//     icon:<UserOutlined />
//   },
//   {
//     key:'/user-manage',
//     title:'用户管理',
//     icon:<UserOutlined />,
//     children:[
//       {
//         key:'/user-manage/list',
//         title:'用户列表',
//         icon:<UserOutlined />
//       }
//     ]
//   },
//   {
//     key:'/right-manage/role',
//     title:'权限管理',
//     icon:<UserOutlined />,
//     children:[
//       {
//         key:'/right-manage/role/list',
//         title:'角色列表',
//         icon:<UserOutlined />
//       },
//       {
//         key:'/right-manage/right/list',
//         title:'权限列表',
//         icon:<UserOutlined />
//       }
//     ]
//   },
// ]


const iconList = {
  '/home':<HomeOutlined />,
  "/user-manage":<UserOutlined />,
  '/right-manage':<PicRightOutlined />,
  '/news-manage':<PaperClipOutlined />,
  '/audit-manage':<AuditOutlined />,
  '/publish-manage':<FormOutlined />
}


function SideMenu(props) {
  const [menuList, setmenuList] = useState([])
  const {role:{rights}} = JSON.parse(localStorage.getItem('token'))
  useEffect(() => {
    axios.get('/rights?_embed=children').then(res=>{
      setmenuList(res.data)
    })
  
    return () => {
      
    }
  }, [])
  const checkPagePermisson = (item)=>{
    return item.pagepermisson===1 && rights.includes(item.key)
  }
  const renderMenu = (menuList)=>{
    return menuList.map(item=>{
      if(item.children?.length>0 && checkPagePermisson(item)){
        return <SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
          {renderMenu(item.children)}
        </SubMenu>
      }
      return checkPagePermisson(item) &&<Menu.Item key={item.key} icon={iconList[item.key]} onClick={()=>{props.history.push(item.key)}}>
        {item.title}
      </Menu.Item>
    })
  }
  const selectKeys = [props.location.pathname]
  const selectOpenKey = ['/' + props.location.pathname.split('/')[1]]
  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{display:'flex',flexDirection:'column',height:'100%'}}>
        <div className="logo">全球新闻发布管理系统</div>
        <div style={{flex:'1',overflow:'auto'}}>
          <Menu theme="dark" mode="inline" selectedKeys={selectKeys} defaultOpenKeys={selectOpenKey}>
            {renderMenu(menuList)}
          </Menu>
        </div>
      </div>
    </Sider>
  )
}
const mapStateToProps = ({CollApsedReducer:{isCollapsed}})=>({
  isCollapsed
})

export default connect(mapStateToProps) (withRouter(SideMenu))
